<template>
    <div class="longContainer">
        <div class="back" @click="goBack"></div>
        <div class="title"></div>
        <transition name="question" appear>
            <div class="question">
                <span>您患病多久了？</span>
            </div>
        </transition>
        <van-picker
            title="标题"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="yearOnChange"
            class="sickYearTime"
        />
        <p class="year">年</p>
        <van-picker
            title="标题"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="monthOnChange"
            class="sickMonthTime"
        />
        <p class="month">月</p>
        <div class="next" @click="gotoSymptom"></div>
    </div>
</template>

<script>
    import {Picker} from 'vant'
    import { Toast } from 'vant';
    export default {
        name:'howLongSick',
        components:{
            'van-picker':Picker
        },
        data(){
            return{
                year:'',
                month:'',
                columns: [0,1,2,3,4],
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            gotoSymptom(){
                localStorage.setItem('pcosOnsetDate',this.year*12+this.month)
                this.$router.push({
                    name:'symptom',
                })
            },
            onConfirm(value, index) {
                Toast(`当前值：${value}, 当前索引：${index}`);
            },
            onConfirm(value,index){
                Toast(`当前值：${value}, 当前索引：${index}`);
            },
            yearOnChange(picker, value, index) {
                this.year=value
                Toast(`当前值：${value}, 当前索引：${index}`);
            },
            monthOnChange(picker, value, index){
                this.month=value
                Toast(`当前值：${value}, 当前索引：${index}`);
            },
            onCancel() {
                Toast('取消');
            },
        }
    }
</script>

<style scoped>
    .longContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
        overflow: hidden;
    }
    .back{
        background-image: url(../assets/img/0-icon@2x/0-18back.png);
        width: 0.48rem;
        height: 0.48rem;
        position: absolute;
        background-position: center;
        background-size: contain;
        top:1.12rem;
        left:.64rem;
    }
    .title{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-9sickKnow.png);
        width: 1.28rem;
        height: .68rem;
        background-position: center;
        background-size: contain;
        left: 3.1rem;
        top: 1.08rem;
    }
    p{
        position: absolute;
        font-size: 0.4rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .year{
        top:7.35rem;
        left: 3.5rem;
    }
    .month{
        top:7.35rem;
        left: 6rem;
    }
    .question{
        position: absolute;
        font-size: 0.45rem;
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
        top: 2.28rem;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .next{
        background-image: url(../assets/img/0-icon@2x/0-20next.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
</style>

<style>
    .sickYearTime{
        width: 1rem;
        position: absolute;
        top:5rem;
        left: 2rem;
        transform: scale(1.3);
    }
    .sickMonthTime{
        width: 1rem;
        position: absolute;
        top:5rem;
        right: 2rem;
        transform: scale(1.3);
    }
</style>